import { Breadcrumb, Button } from 'antd'
import '../../assets/css/menu.css'
import { lazy, useState, useRef } from 'react'
import { menuList } from '../../request/api'
// 引入子组件
const List = lazy(() => import('./list'))
const Dialog = lazy(() => import('./dialog'))
function App () {
  const [isShow, setisShow] = useState(false)
  let [isAdd, setAdd] = useState(true)
  //设定一个ref
  let toastInfo = useRef()
  const add = () => {
    setisShow(true)
    setAdd(true)
  }
  const cancel = () => {
    setisShow(false)
  }
  //封装一个列表的编辑按钮事件
  const edit = id => {
    setisShow(true)
    setAdd(false)
    toastInfo.current.lookup(id)
  }
  const [menuData, setMenu] = useState([])
  // 获取列表
  async function getList () {
    let res = await menuList({ istree: true })
    if (res.code == 200) {
      setMenu(res.list)
    }
  }
  return (
    <div className='menuBox'>
      {/* 面包屑 */}
      <Breadcrumb>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>菜单管理</Breadcrumb.Item>
      </Breadcrumb>
      {/* 添加 */}
      <Button type='primary' className='btn' onClick={add}>
        添加
      </Button>
      {/* 列表 */}
      <List edit={edit} getList={getList} menuData={menuData}></List>
      <Dialog
        isShow={isShow}
        isAdd={isAdd}
        cancel={cancel}
        getList={getList}
        menuData={menuData}
        ref={toastInfo}
      ></Dialog>
    </div>
  )
}
export default App
